<template>
<div class="all">
    <ul class="all-ul">
        <router-link 
        v-for="lists of list"
        :key="lists.id"
        tag="li"
         :to="/mall/+ lists.id"
        class="all-ul-li"
          @click.native="toCateGory(lists.id)"
          >{{lists.name}}</router-link>

            <!-- <router-link tag="li" to="/mall/yifu" class="all-ul-li">衣服</router-link>
            <router-link tag="li" to="/mall/kuzhi" class="all-ul-li">裤子</router-link>
           <router-link tag="li" to="/mall/bao" class="all-ul-li">包</router-link> -->
    </ul>
     <router-view></router-view>
   </div>
</template>

<script>
import routes from '@/router/routes'

export default {
    data(){
        return {
            list:[]
        }
    },
    methods:{
        toCateGory(id){
            console.log(id)
        }
    },
   created(){
       console.log(this)
       this.$http.get('http://www.xiongmaoyouxuan.com/api/tabs?sa=')
            .then(resp=>{
                console.log(resp.data.data.list)
                this.list = resp.data.data.list.slice(1,16)
            })
   }
}
</script>

<style lang="scss" scoped>
.all{
    height: 100%;
    display: flex;
       overflow: hidden;
}
    .all-ul{
        background: #dedede;
        width:70px;
        height: 100%;
        border: 1px solid red;
        display: flex;
      
        flex-direction: column;
         overflow-x: hidden;
   
        &-li{
            height: 30px;
            width:70px;
           
           
        }
        &-li:hover{
            background: red;
        }
    }
</style>
